import { useState } from 'react'
import { Card, Menu, Layout, Typography } from 'antd'
import BMICalculator from '../components/BMICalculator'
import Counter from '../components/Counter'
import CountDown from '../components/CountDown'
import TodoList from '../components/TodoList'
import DrinkTime from '../components/DrinkTime'

const { Title } = Typography
const { Sider, Content } = Layout

const COMPONENTS = {
  bmi: {
    title: 'BmiCal',
    component: <BMICalculator />,
  },
  counter: {
    title: 'Counter',
    component: <Counter />,
  },
  countdown: {
    title: 'Countdown',
    component: <CountDown />,
  },
  todo: {
    title: 'TodoList',
    component: <TodoList />,
  },
  drinktime: {
    title: 'DrinkTime',
    component: <DrinkTime />,
  },
}

const Practice = () => {
  const [selectedKey, setSelectedKey] = useState('bmi')

  const menuItems = [
    { key: 'bmi', label: 'BmiCal' },
    { key: 'counter', label: 'Counter' },
    { key: 'countdown', label: 'Countdown' },
    { key: 'todo', label: 'TodoList' },
    { key: 'drinktime', label: 'DrinkTime' },
  ]

  const selectedComponent = COMPONENTS[selectedKey as keyof typeof COMPONENTS]

  return (
    <Layout className="min-h-[calc(100vh-64px)]">
      <Sider theme="light" width={200} className="border-r">
        <Menu
          mode="inline"
          selectedKeys={[selectedKey]}
          items={menuItems}
          onClick={({ key }) => setSelectedKey(key)}
          className="h-full"
        />
      </Sider>
      <Content className="p-6 bg-gray-50">
        <Card title={selectedComponent.title} className="w-full max-w-2xl mx-auto">
          {selectedComponent.component}
        </Card>
      </Content>
    </Layout>
  )
}

export default Practice 